<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>正在直播-<{$data.room.name}></title>
    <include file="Public:headhtml"/>
    <script type="text/javascript" src="/Static/player/ckplayer.js" charset="utf-8"></script>
    <script type="text/javascript" src="/Static/js/reconnecting-websocket.js" charset="utf-8"></script>
    <script type="text/javascript" src="/Static/js/chat.js" charset="utf-8"></script>
</head>

<body>
<include file="Public:head"/>

<!--中间开始-->
<div class="center middle backgray">
    <div class="centern middle position_r">
        <!--内容开始-->

        <!--视频开始-->
        <div class="video">
            <ul>
                <li class="video_t1"><{$data.room.name}></li>
                <li class="video_t2"><img src="/Static/images/hua_30.png"/> <span class="position_r"><{$data.teacher.name}> <{$data.teacher.school}></span>
                </li>
            </ul>

            <div class="video_nr">
                <!--播放开始-->
                <div class="video_left left" id="a1">

                </div>
                <!--播放结束-->

                <!--提示3开始-->
                <div class="video_right left">
                    <!--聊天开始-->
                    <ul class="chat">
                        <div id="chatroom">

                        </div>

                    </ul>
                    <!--聊天结束-->
                    <!--输入开始-->
                    <div class="introduce">

                        <textarea rows="" cols="" id="inputMessage" class="introduce_t1 left"></textarea>
                        <a href="javascript:void(0);" class="introduce_t2 left" onclick="send()">提问</a>

                        <div class="clean_game"></div>
                    </div>
                    <!--输入结束-->

                </div>
                <!--提示3结束-->


                <div class="clean_game"></div>
            </div>
            <!--介绍开始-->
            <ul class="video_rlist3">
                <li class="video_rlt6" style="text-align: right"><a href="/Question/Index/Rid/12">开始答题</a></li>
                <li class="video_rlt6">课程介绍</li>
                <li class="video_rlt7">
                    <{$data.room.description}>
                </li>
            </ul>

            <!--介绍结束-->


        </div>
        <!--视频结束-->

        <!--弹出开始-->
        <ul class="arrearage position_a" style="display:none">
            <li class="arrearage_t1">课程结束，课后测试及教师答疑</li>
            <li class="arrearage_t2">需单独付费或开通VIP</li>
            <li class="arrearage_t3">单独付费 ￥100.00</li>
            <li class="arrearage_t4 middle"><img src="/Static/images/index_14.jpg"/> <br/> 微信扫码支付</li>
            <li class="arrearage_t5"><a href="#">开通VIP，永久免费</a></li>
        </ul>
        <!--弹出结束-->


        <!--内容结束-->
    </div>
</div>
<!--中间结束-->
<!--评论开始-->
<div class="center middle ">
    <div class="centern middle">
        <!--左侧开始-->
        <div class="criticism">
            <a href="#"><img src="/Static/images/index_7.jpg" class="criticism_pic"/></a>
            <ul>
                <li class="criticism_t1">同学评论</li>
                <li class="criticism_t2"><textarea name="" cols="" rows="" id="message"></textarea></li>
                <if condition="$Think.cookie.id GT 0">
                    <li class="criticism_t3"><a href="javascript:void(0);" onclick="comments('<{$data.room.id}>');"
                                                class="datum_lt2">发表评论</a></li>
                </if>
            </ul>


            <!--框体开始-->
            <div class="comment width_full">
                <ul id="comments">
                    <li class="comment_t1">全部评论（<span class="counts"><{$count}></span>）</li>
                    <div class="comments">
                        <foreach name="commentsList" item="vo" key="key">
                            <li class="comment_t2" <if condition="$key gt 1"> style="display: none" </if> >
                                <div class="position_r comment_t2_pic1 left">
                                    <a href="javascript:void(0);"><img src="<{$vo.picture}>"
                                                                       class="comment_t2_pic1"/></a>
                                </div>
                                <ul class=" left comment_t3">
                                    <li class="comment_t3_1"><a href="javascript:void(0);"><{$vo.nickname}></a></li>
                                    <li class="comment_t3_2"><{$vo.message}></li>
                                    <li class="comment_t3_3"><span class="position_r"
                                                                   style="top:5px;"><{$vo.time}></span> <span
                                            class="right"><a href="javascript:void(0);"><img
                                            src="/Static/images/video_18.png" onclick="ding('<{$vo.id}>');"/>(<span
                                            class="ding<{$vo.id}>"><{$vo.praise}></span>)</a></span>
                                    </li>
                                </ul>
                                <div class="clean_game"></div>
                            </li>
                        </foreach>
                    </div>
                    <if condition ="$count gt 2">
                        <ul class="criticism_t4">
                            <li><a href="javascript:void(0);" id="more">查看更多</a></li>
                        </ul>
                    </if>


                    <!--页数开始-->
                    <ul class="page_com" style="display:none">
                        <li><a href="#" class="page_com_1"><</a> <a href="#" class="page_com_2">1</a> <a href="#"
                                                                                                         class="page_com_1">2</a>
                            <a href="#" class="page_com_1">></a></li>

                    </ul>
                    <!--页数结束-->


                </ul>


            </div>
            <!--框体结束-->


        </div>
        <!--左侧结束-->


    </div>
</div>
<!--评论结束-->
<script type="text/javascript">
    var rid = "<{$Think.get.id}>";
    var userId = "<{$Think.cookie.id}>";
    if(userId == ""){
        $("#inputMessage").attr('disabled',"disabled");
    }
    chat(rid);
    function comments(rid) {

        var message = $("#message").val();
        if (message == "") {
            alert("评论内容不可为空");
        } else {
            var uid = "<{$Think.cookie.id}>";
            $.ajax({
                type: 'POST',
                url: "/Online/comments",
                data: {'rid': rid, 'uid': uid, 'message': message},
                success: function (res) {
                    var obj = eval('(' + res + ')');
                    console.log(obj);
                    if (obj.status == "ok") {
                        var html = htmlcomments(obj.picture, obj.nickname, obj.message, obj.time, obj.id);
                        console.log(html);
                        $(".comments").prepend(html);
                        $(".counts").html(parseInt($(".counts").html()) + 1);
                        $("#message").val("");
                        alert("评论成功");
                    } else {
                        alert("评论失败");
                    }
                }
            })
        }
    }

    function htmlcomments(pic, name, message, time, id) {
        var html = '<li class="comment_t2">' +
                '<div class="position_r comment_t2_pic1 left">' +
                '<a href="javascript:void(0);"><img src="' + pic + '" class="comment_t2_pic1"/></a>' +
                '</div>' +
                '<ul class=" left comment_t3">' +
                '<li class="comment_t3_1"><a href="javascript:void(0);">' + name + '</a></li>' +
                '<li class="comment_t3_2">' + message + '</li>' +
                '<li class="comment_t3_3"><span class="position_r" style="top:5px;">' + time + '</span> <span' +
                ' class="right"><a href="javascript:void(0);"><img src="/Static/images/video_18.png"  onclick="ding('+id+');" /> (<span class="ding'+id+'">0</span>)</a></span>' +
                '</li>' +
                '</ul>' +
                '<div class="clean_game"></div>' +
                '</li>';
        return html;
    }

</script>
<script type="text/javascript">
    /**
     *
     * @param cid
     */
    function ding(cid) {

        var uid = "<{$Think.cookie.id}>";
        var rid = "<{$Think.get.id}>";
        if (uid == "") {
            alert("您尚未登录，不允许此操作");
        } else {
            $.ajax({
                type: 'POST',
                url: "/Online/ding",
                data: {'cid': cid, 'uid': uid, 'rid': rid},
                success: function (res) {
                    var obj = eval('(' + res + ')');
                    if (obj.status == "ok") {
                        $(".ding" + cid + "").html(parseInt($(".ding" + cid + "").html()) + 1);
                        alert("操作成功")
                    } else if (obj.status == "haved") {
                        alert("已经顶过了！");
                    } else {
                        alert("操作失败");
                    }

                }
            })
        }

    }
</script>
<script type="text/javascript">
    var flashvars = {
        f: '/Static/player/m3u8.swf',
        a: '<{$data.liveUrl.play}>',
        s: 4,
        c: 0,
        lv: 1, //注意，如果是直播，需设置lv
        p: 1,
        b: 0
    };
    var params = {bgcolor: '#FFF', allowFullScreen: true, allowScriptAccess: 'always', wmode: 'transparent'};
    CKobject.embedSWF('/Static/player/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '690', flashvars, params);
</script>
<script type="text/javascript">
    $("#more").click(function(){
        $(".comment_t2").show();
        $("#more").hide();
    })
</script>

<include file="Public:footer"/>


</body>
</html>
